<template>
	<view class="page">
		<!-- 头部 start -->
		<fu-custom bgColor="bg-white" :isBack="true" :isBottom="true">
			<block slot="content"><text class="text-333">{{i18n['选择自取点']}}</text></block>
		</fu-custom>
		<!-- 头部 end -->
		<!-- 筛选 -->
		<view class="padding-top-sm padding-lr bg-white padding-bottom" style="position: sticky;z-index: 99;"
			:style="{top: CustomBar+'px'}">
			<view class="padding-sm bg-f6 round flex align-center justify-between fu-fs24">
				<view class="flex align-center flex-sub" style="min-width: 1px;">
					<text class="cuIcon-search margin-right-xs"></text>
					<input class="text-333 fu-fs24 flex-sub" style="min-width: 1px;" placeholder-class="text-999"
						placeholder="输入地址，查找附近自取点" type="text" confirm-type="search" v-model="deliver_name"
						:adjust-position="false" :hold-keyboard="false" @confirm="searchConfirm">
					<text v-if="deliver_name.length != 0" class="cuIcon-close text-gray padding-right-xs"
						@tap="handleClear"></text>
				</view>
				<view class="padding-left-sm margin-left-sm solid-left text-333" @click="searchConfirm">搜索</view>
			</view>
			<view class="margin-top flex align-center justify-between">
				<view class="flex align-center fu-fs24">
					<text class="cuIcon-location text-theme margin-right-xs fu-fs36"></text>
					<view class="text-cut text-theme">
						<text class="margin-right-sm"
							v-if="location && location.district">{{location.district || ''}}</text>
						<block class=""></block>
						<block v-if="selectItem.deliver_name ">{{selectItem.deliver_name}}</block>
						<block v-else> {{i18n['请选择自取点']}}</block>
					</view>
				</view>
				<view class="flex-shrink flex align-center" @click="getLocation">
					<image :src="imgBaseUrl+'address/posi.png'" mode="" class="fu-block-40"></image>
					<text class="text-333 margin-left-xs">{{i18n['重新定位']}}</text>
				</view>
			</view>
		</view>
		<view class="padding-lr padding-tb fu-fs28 text-333 margin-top-xs bg-white">
			{{i18n['商品自取点']}}
		</view>
		<!-- 内容选择 -->
		<view class="padding-lr bg-white">
			<block v-for="(item, index) in listData" :key="index">
				<view class="flex align-stretch justify-between margin-bottom-48">
					<view class="fu-block-180 flex-shrink radius-16 bg-f8 margin-right-20" v-if="item.thumb">
						<fu-image radius="16" :src="item.thumb" mode="aspectFill"></fu-image>
					</view>
					<view class="flex flex-direction justify-between flex-sub" style="min-width: 1px;">
						<view class="text-333">{{item.deliver_name}}</view>
						<view class="margin-top-sm flex align-center justify-between">
							<text class="text-999 flex-sub" style="min-width: 1px;">{{item.full_address}}</text>
							<view
								class="height-56 line-height-56 width-132 text-center bg-theme text-center text-white fu-fs26 round"
								@click="chooseInvite(item)">{{i18n['选择']}}</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 分页组件 start -->
		<fu-empty :paging-list-loaded-all="pagingListLoadedAll" :paging-list-no-list-data="pagingListNoListData"
			:list-data-length="listDataLength" :isLoadInit='isLoadInit'></fu-empty>
		<!-- 分页组件 end -->
		<!-- 网络监测 start -->
		<fu-notwork></fu-notwork>
		<!-- 网络监测 end -->
	</view>
</template>
<script>
	// 高德地图sdk
	import pagingList from '@/common/mixin/paging_list.js' //引入混合开发
	import amapFile from '@/libs/amap-wx.js';
	export default {
		mixins: [pagingList],
		data() {
			return {
				minixPagingListsApi: global.apiUrls.getInviteAddress, //明细请求地址
				pageingListApiMethod: "post", //请求方法
				allowOnloadGetList: false, // 是否允许页面onload生命周期进入后立马执行getlist

				selectItem: {},
				deliver_name: '', // 搜索的文本
				myAmapFun: null, // 高德地图实例
				province: '', // 省
				city: '', //市
				district: '', //区
				provinceCode: '', // 省 code码
				cityCode: '', //市 code码
				districtCode: '', //区 code码
				addressDesc: '', // 详细地址
			};
		},
		computed: {
			location() {
				return this.$store.getters.location;
			}
		},
		onLoad() {
			// 初始化高德地图SDK,记得换成自己的key
			this.myAmapFun = new amapFile.AMapWX({
				key: 'da1c01509a0dbea0bff1d85d45edc378'
			});
			// 定位功能
			if (!this.location || !this.location.district) {
				this.autoGetLocation((data) => {
					this.$store.commit('updataLocation', data);
					this.pagingListToggle();
				});
			} else {
				this.pagingListToggle();
			}
		},
		methods: {
			/**
			 * @description  设置要请求的参数
			 * 在混入开发时，调用该方法和混入的请求参数合并在一起
			 */
			pagingListPostData() {
				return {
					district_id: this.location && this.location.districtCode || '',
					deliver_name: this.deliver_name || '',
					// region_code: this.location.districtCode,
					longitude: this.location && this.location.longitude || '',
					latitude: this.location && this.location.latitude || ''
				}
			},
			// 选择自提点
			chooseInvite(item) {
				uni.$emit('select_take_address', item);
				uni.navigateBack();
			},
			/**
			 * @func 定位地址
			 */
			getLocation() {
				this.chooseLocation();
			},
			/**
			 * @func 地图选点
			 */
			chooseLocation() {
				let _this = this;
				uni.chooseLocation({
					success: res => {
						console.log(res, '地图');
						this.myAmapFun.getRegeo({
							location: res.longitude + ',' + res.latitude,
							success: data => {
								//成功回调
								console.log('sdk回调', data);
								let regeoData = data[0].regeocodeData.addressComponent;
								// this.province = regeoData.province;
								// this.city = Array.isArray(regeoData.city) && regeoData.city
								// 	.length == 0 ? regeoData.province : regeoData.city;
								// this.district = regeoData.district;
								// this.addressDesc = res.address + res.name;
								// this.provinceCode = regeoData.adcode.substr(0, 2) + '0000';
								// this.cityCode = regeoData.adcode.substr(0, 4) + '00';
								// this.districtCode = regeoData.adcode + '';
								let data1 = {
									longitude: res.longitude,
									latitude: res.latitude,
									districtCode: regeoData.adcode,
									district: regeoData.district
								}
								this.$store.commit('updataLocation', data1);
								this.pagingListToggle();
							},
							fail: info => {
								//失败回调
								console.log(info);
							}
						});
					}
				});
			},
			/**
			 * @description 切换搜索条件
			 * @param {Object} e input框事件源
			 */
			searchConfirm() {
				if (!this.deliver_name.trim()) {
					return this.$message.info(this.i18n['请输入要搜索的内容']);
				}
				uni.hideKeyboard();
				this.pagingListToggle();
			},

			// 清除关键字
			handleClear() {
				this.deliver_name = '';
				this.pagingListToggle();
			},
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
	}
</style>
